<template>
    <div class="py-28 text-center container m-auto max-w-screen-md w-full overflow-x-hidden">
        <h2 class="text-38px text-black mb-8 font-bold">最全面的安全防護<br class="block md:hidden">給您最完整的保障</h2>
        <div class="flex flex-col px-4 md:px-4">
            <div v-for="(item, i) in list" class="shadow-xl bg-white flex flex-col justify-center items-center md:items-stretch md:flex-row rounded-xl p-2 mb-6" :data-aos="(i%2 === 0) ?'fade-left':'fade-right'" data-aos-once="true" data-aos-delay="300">
                <div class="md:p-3 text-center md:w-2/5">
                    <img class="w-32 mx-auto" :src="item.img" :alt="item.title">
                    <h3 class="text-xl font-bold text-purple mb-2 whitespace-nowrap">
                        {{ item.title }}
                    </h3>
                </div>
                <div class="p-3 md:w-4/5">
                    <span class="border-t pt-4 md:pt-0 md:border-t-0 md:border-l border-slate-300 md:pl-6 inline-flex items-center h-full text-left text-grayBlack">
                        {{ item.desc }}
                    </span>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import AOS from 'aos';
import 'aos/dist/aos.css'; 

AOS.init();

import img1 from '../assets/images/img-1.webp'
import img2 from '../assets/images/img-2.webp'
import img3 from '../assets/images/img-3.webp'
import img4 from '../assets/images/img-4.webp'
import img5 from '../assets/images/img-5.webp'
import img6 from '../assets/images/img-6.webp'


const list = reactive([
    {
        img: img1,
        title: '全方位解決方案',
        desc: '不論應用程式部署於公有雲、混合雲端或多雲端架構，COCloud 皆可協助您防禦分散式阻斷服務或網路攻擊,提供完整第 3 層、第 4 層、第 7 層攻擊防禦。'
    },
    {
        img: img2,
        title: '高性價比成本',
        desc: '大流量彈性按天計費，防護能力按次購買等多種防護方案，多場景支持，根據實際需求,配置最高性價比防護方案。'
    },
    {
        img: img3,
        title: '優秀清洗能力',
        desc: '實現實時防護，清洗成功率達 99.995%，讓相關業務人員輕鬆面對 DDoS 複雜攻擊，保障業務平穩運行。'
    },
    {
        img: img4,
        title: 'AI 智能防護策略',
        desc: '以大數據運算和機器學習為基礎，建構 AI 智能 Anti-DDoS 系統，自動偵測及調適減輕大量分散式阻斷服務攻擊。'
    },
    {
        img: img5,
        title: '全球防護節點',
        desc: '結合七大合作原廠全球布局，提供 T 級防禦能力，為用戶全球化業務佈局提供最優質近源防護。'
    },
    {
        img: img6,
        title: '攻擊數據分析',
        desc: '提供實時精準的流量報表及攻擊詳信息，讓用戶隨時掌握防護資源與流量模式詳情。'
    },
])
</script>
  